<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta name="author-name" content="Mironcoder | Miron Mahmud" />
  <meta name="author-email" content="mironcoder@gmail.com" />
  <meta name="author-profile" content="https://themeforest.net/user/mironcoder" />
  <meta name="template-name" content="Vegana" />
  <meta name="template-created" content="09-November-2020" />
  <meta name="template-title" content="Vegana - vegan food eCommerce store html template" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta name="keywords" content="vegana, vegan, food, eCommerce, store, html, template, bootstrap, vegetarian, organic, vegetables, greengrocery, fruit, healthy, shop" />
  <title>付款界面</title>
  <link rel="icon" href="../assets/images/logo/favicon.png" />
  <link rel="stylesheet" href="../assets/source/css/vendor/flaticon.css" />
  <link rel="stylesheet" href="../assets/source/css/vendor/fontawesome.css" />
  <link rel="stylesheet" href="../assets/source/css/vendor/bootstrap.min.css" />
  <link rel="stylesheet" href="../assets/source/css/custom/main.css" />
  <link rel="stylesheet" href="../assets/source/css/custom/checkout.css" />
  <link rel="stylesheet" href="../assets/source/css/custom/pay.css">
  <style>
    .api{
      color: red;
      width: 100px;
      height: 30px;
      position: relative;
      right: -1000px;
      top: -109px;
    }
  </style>
 </head>
 <body>
  <div id="app"> 
  <header class="header-part">
   <div class="container">
    <div class="row">
     <div class="col-sm-12 col-md-6 col-lg-6">
      <ul class="header-info">
        <li> <i class="fas fa-envelope"></i><p>{{adminEmail}}</p></li>
        <li> <i class="fas fa-phone-alt"></i><p>+{{adminTel}}</p></li>
      </ul>
     </div>
     <div class="col-sm-12 col-md-6 col-lg-6">
      <div class="login_info" v-if="userInfo == ''">
				<a href="login.html" target="_blank" title="点击登录">您好，请先登录</a>
				<a href="reg.html" target="_blank" title="点击注册">免费注册</a>
			</div>
			<div class="login_info" v-else>
				<span>尊敬的用户{{userInfo.uname}},您好</span>
				<a href="login.html" title="点击退出">退出登录</a>
			</div>
     </div>
    </div>
   </div> 
  </header> 
  <!-- 下拉菜单 -->
  <nav class="navbar-part">
    <div class="container">
     <div class="row">
      <div class="col-lg-12">
       <div class="navbar-element">
        <ul class="left-widget">
         <li><a class="icon icon-inline menu-bar" href="javascript:void(0);"><i class="fas fa-align-left"></i></a></li>
        </ul> 
        <a class="navbar-logo" href="#"> <img src="../assets/images/logo/01.png" alt="logo" /> </a>
        <form class="search-form navbar-src"> 
         <input type="text" placeholder="搜索任何内容..." /> 
         <button class="btn btn-inline"> <i class="fas fa-search"></i> <span>搜索</span> </button>
        </form>
        <ul class="right-widget">
          <li><a class="icon icon-inline" href="login.html"><i class="fas fa-user"></i></a></li>
          <li><a class="icon icon-inline" href="wishlist.html"><i class="fas fa-heart"></i><sup>{{wishCount}}</sup></a></li>
          <li><a class="icon icon-inline" href="cartlist.html"><i class="fas fa-shopping-cart"></i><sup>{{cartCount}}</sup></a></li>
         </ul>
       </div>
      </div>
     </div>
     <div class="row">
      <div class="col-lg-12">
       <div class="navbar-slide">
        <div class="navbar-content">
         <div class="navbar-slide-cross"> 
          <a class="icon icon-inline cross-btn" href="javascript:void(0);"><i class="fas fa-times"></i></a>
         </div>
         <div class="navbar-slide-logo"> 
          <a href="javascript:void(0);"><img src="../assets/images/logo/01.png" alt="logo" /></a>
         </div>
         <form class="search-form mb-4 navbar-slide-src"> 
          <input type="text" placeholder="搜索任何内容..." /> 
          <button class="btn btn-inline"> <i class="fas fa-search"></i> <span>搜索</span> </button>
         </form>
         <ul class="navbar-list">
          <li class="navbar-item active"><a class="navbar-link" href="../index.html">家</a></li>
          
          <li class="navbar-item navbar-dropdown"> <a class="navbar-link dropdown-indicator" href="#"> <span>店</span> <i class="fas fa-chevron-down"></i> </a>
           <ul class="dropdown-list">
            <li><a class="dropdown-link" href="shop-rightbar.html">使用右栏购物</a></li>
           </ul></li>
          <li class="navbar-item navbar-dropdown"> <a class="navbar-link dropdown-indicator" href="#"> <span>页面</span> <i class="fas fa-chevron-down"></i> </a>
           <ul class="dropdown-list">
            <li><a class="dropdown-link" href="cartlist.html">购物清单</a></li>
            <li><a class="dropdown-link" href="wishlist.html">心愿单</a></li>
            <li><a class="dropdown-link" href="checkout.html">收款处</a></li>
            <li><a class="dropdown-link" href="login.html">注销</a></li>
           </ul></li>
          <li class="navbar-item navbar-dropdown"> <a class="navbar-link dropdown-indicator" href="#"> <span>博客</span> <i class="fas fa-chevron-down"></i> </a>
           <ul class="dropdown-list">
            <li><a class="dropdown-link" href="blog-list.html">博客列表</a></li>
           </ul></li>
           <li class="navbar-item"><a class="navbar-link" href="account.html">账户</a></li>
           <li class="navbar-item"><a class="navbar-link" href="contact.html">联系我们</a></li>
         </ul>
        </div>
       </div>
      </div>
     </div>
    </div> 
   </nav>
  <div class="btmbar-part">
   <ul class="btmbar-widget">
    <li> <a href="../home-1.html"> <i class="fas fa-home"></i> <span>Home</span> </a></li>
    <li> <a href="wishlist.html" class="wish-icon"> <i class="fas fa-heart"></i> <span>Wishlist</span> <sup>0</sup> </a></li>
    <li> <a href="cartlist.html" class="cart-icon"> <i class="fas fa-shopping-basket"></i> <span>Cart</span> <sup>0</sup> </a></li>
    <li> <a href="account.html"> <i class="fas fa-cog"></i> <span>Settings</span> </a></li>
   </ul>
  </div> 
  <section class="single-banner">
   <div class="container">
    <div class="row">
     <div class="col-lg-12">
      <div class="single-content">
       <h2>Checkout</h2>
       <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="../home-1.html">Home</a></li>
        <li class="breadcrumb-item"><a href="shop-leftbar.html">Shop</a></li>
        <li class="breadcrumb-item"><a href="product-details.html">Product</a></li>
        <li class="breadcrumb-item active" aria-current="page">Checkout</li>
       </ol>
      </div>
     </div>
    </div>
   </div> 
  </section> 
  <section class="checkout-part">
   <div class="container">

    

    <div class="checkout-form">
     <div class="row">
      
      <h3 class="common_title">确认收货地址</h3>

<div class="common_list_con clearfix">
    <input type="hidden" id="default_addr"/>
    <input type="hidden" id="current_addr"/>
    <dl id="addr_list">
        <dt>寄送到：</dt>
        <div v-if="addrs.length<=0">暂无信息，请先添加</div>
        <dd class="default_location" v-for="item in addrs">{{item.province}} {{item.city}} {{item.area}} {{item.address}} （{{item.aname}} 收） {{item.atel}} <a href="javascript:void(0)" @click="default_addr(item)">设为默认</a>
          <a href="javascript:void(0)" @click="locationaddr(item)">设为当前收货地址</a></dd>
        <!--
        <dd class="current_location">北京市 海淀区 东北旺西路8号中关村软件园 （李思 收） 159****0775 
			<a href="javascript:void(0)">设为默认</a></dd>
		<dd class="default_location">北京市 海淀区 东北旺西路8号中关村软件园 （李思 收） 159****0775 
			<a href="javascript:void(0)">设为默认</a>
			<a href="javascript:void(0)">设为当前收货地址</a>
		</dd>
       --> 
	</dl>
    <a href="javascript:showAddrDiv()" class="edit_site">编辑收货地址</a>
    <a href="./map.html" class="api">百度地图定位</a>
</div>

<div id="addr_div">
    <img src="../assets/images/close.png" title="关闭" onclick="hiddenDiv()"/>
    <form id="myform">
        <ul>
            <li>
                <label for="addr_name">收货人：</label>
                <input id="addr_name" v-model="addr.aname"  name="name" type="text" placeholder="请输入收货人姓名..." />
            </li>
            <li>
                <label for="addr_tel">联系方式：</label>
                <input id="addr_tel" v-model="addr.atel"  name="tel" type="text" placeholder="请输入收货人联系方式..." />
            </li>
            <li>
                <label>收货地址：</label>
                <select id="province" v-model="addr.prov"  name="province"></select>
                <select id="city" name="city" v-model="addr.city" >
                    <option value="0">--请选择城市--</option>
                </select>
                <select id="area" name="area"  v-model="addr.area">
                    <option value="0">--请选择地区--</option>
                </select>
            </li>
            <li>
                <label for="addr_addr">详细地址：</label>
                <input id="addr_addr" name="addr" v-model="addr.address" style='width: 480px;' type="text" placeholder="请输入详细地址（街道、门牌等）" />
            </li>
            <li class="addr_btn">
                <a href="javascript:void(0)"  @click="addAddr">添加收货地址</a>
            </li>
        </ul>
    </form>
</div>
     
      <div class="col-lg-6 mb-5">
        <div class="check-form-title">
         <h3>付款方式</h3>
        </div>
        <div class="form-check"> 
         <input class="form-check-input" type="radio" name="exampleRadios" id="radio3" value="option3" v-model="option"/> 
         <label class="form-check-label" for="radio4"> 支付宝 </label>
        </div>
       </div>
    </div>
     <div class="row">
      
      
     </div>
     <div class="row">
      <div class="col-lg-12 mb-5">
       <div class="check-form-title">
        <h3>确认订单</h3>
       </div>
       <div class="checkout-table">
        <table class="table">
         <thead>
          <tr>
           <th scope="col">商品编号</th>
           <th scope="col">商品名</th>
           <th scope="col">商品单位</th>
           <th scope="col">商品价格</th>
           <th scope="col">数量</th>
           <th scope="col">小计</th>
          </tr>
         </thead>
         <tbody>
          <tr v-for="(item,index) in carts">
           <th scope="row">{{index+1}}</th>
           <td class="check-product"> <img :src=`../../../upload/${item.pic}` alt="product-3" /> <span>{{item.pname}}</span></td>
           <td class="check-price"> <span>{{item.weight}}</span></td>
           <td class="check-price"> <span>${{item.outprice}}</span></td>
           <td class="check-quantity"> <span>{{item.cartnum}}</span></td>
           <td class="check-total"> <span>${{(item.outprice * item.cartnum).toFixed(2)}}</span> </td>
          </tr>
         </tbody>
        </table>
       </div>
      </div>
     </div>
     <div class="row">
      <div class="col-lg-12">
       <div class="checkout-charge">
        <ul>
         <li> <span>运费</span> <span>$10.00</span></li>
         <li> <span>小计</span> <span>${{totalPrice}}</span></li>
         <li v-if="dismoney != 0"> <span>优惠卷:</span> <span>{{dismoney*10}}折优惠</span></li>
         <li v-if="dismoney == 0"> <span>总计</span> <span>${{(parseFloat(totalPrice) + 10).toFixed(2)}}</span></li>
         <li v-else> <span>总计</span> <span>${{((parseFloat(totalPrice) + 10)*dismoney).toFixed(2)}}</span></li>
        </ul>
       </div>
       <div class="check-order-btn"> 
        <button class="btn btn-inline" @click="pay"> <i class="fas fa-paper-plane"></i> <span>付款</span> </button>
       </div>
      </div>
     </div>
    </div>


   </div> 
  </section>

  <section class="news-part">
   <div class="container">
    <div class="row">
     <div class="col-md-5 col-lg-6">
      <div class="news-content">
       <h2>Subscribe for Latest Offers</h2>
      </div>
     </div>
     <div class="col-md-7 col-lg-6">
      <form class="search-form news-form"> 
       <input type="text" placeholder="Enter Email Address" /> 
       <button class="btn btn-inline"> <i class="fas fa-envelope"></i> <span>Subscribe</span> </button>
      </form>
     </div>
    </div>
   </div> 
  </section> 
  <footer class="footer-part">
   <div class="container">
    <div class="row">
     <div class="col-md-6 col-lg-4">
      <div class="footer-content"> 
       <a href="#"><img src="../assets/images/logo/01.png" alt="logo" /></a>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur repudiandae quisquam adipisci asperiores, ipsum ipsa repellat assumenda dolor perspiciatis.</p>
       <ul class="footer-icon">
        <li><a class="icon icon-inline" href="#"><i class="fab fa-facebook-f"></i></a></li>
        <li><a class="icon icon-inline" href="#"><i class="fab fa-twitter"></i></a></li>
        <li><a class="icon icon-inline" href="#"><i class="fab fa-linkedin-in"></i></a></li>
        <li><a class="icon icon-inline" href="#"><i class="fab fa-instagram"></i></a></li>
        <li><a class="icon icon-inline" href="#"><i class="fab fa-pinterest-p"></i></a></li>
       </ul>
      </div>
     </div>
     <div class="col-md-6 col-lg-4">
      <div class="footer-content">
       <h3 class="title">Useful Links</h3>
       <div class="footer-widget">
        <ul>
         <li><a href="#">My Account</a></li>
         <li><a href="#">Order History</a></li>
         <li><a href="#">Order Tracking</a></li>
         <li><a href="#">Best Seller</a></li>
         <li><a href="#">New Arrivals</a></li>
        </ul>
        <ul>
         <li><a href="#">Location</a></li>
         <li><a href="#">Affiliates</a></li>
         <li><a href="#">Contact</a></li>
         <li><a href="#">Carrer</a></li>
         <li><a href="#">Faq</a></li>
        </ul>
       </div>
      </div>
     </div>
     <div class="col-md-12 col-lg-4">
      <div class="footer-content">
       <h3 class="title">Download the App</h3>
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit dicta amet tenetur soluta blanditiis at optio molestias facilis praesentium eos! Sed placeat a labore corporis aliquam reiciendis eaque quisquam corrupti.</p>
      </div>
      <ul class="download-app">
       <li><a href="#"><img src="../assets/images/logo/google.png" alt="google" /></a></li>
       <li><a href="#"><img src="../assets/images/logo/app.png" alt="app" /></a></li>
      </ul>
     </div>
    </div>
   </div> 
  </footer>
  <div class="footer-bottom">
   <div class="container">
    <p>Copyright &copy; 2020 | All rights reserved by <a target="_blank" href="https://themeforest.net/user/mironcoder">Mironcoder</a></p>
    <ul class="pay-card">
     <li><a href="#"><img src="../assets/images/pay-card/01.jpg" alt="payment-1" /></a></li>
     <li><a href="#"><img src="../assets/images/pay-card/02.jpg" alt="payment-2" /></a></li>
     <li><a href="#"><img src="../assets/images/pay-card/03.jpg" alt="payment-3" /></a></li>
     <li><a href="#"><img src="../assets/images/pay-card/04.jpg" alt="payment-4" /></a></li>
    </ul>
   </div>
  </div>
  </div>
  <script src="../js/vue.js"></script>
  <script src="../js/axios.js"></script>
  <script src="../js/qs.js"></script>
  <script src="../assets/source/js/custom/addr.js"></script> 
  <script src="../assets/source/js/vendor/jquery-1.12.4.min.js"></script> 
  <script src="../assets/source/js/vendor/popper.min.js"></script> 
  <script src="../assets/source/js/vendor/bootstrap.min.js"></script> 
  <script src="../assets/source/js/custom/main.js"></script> 
  <script>
    let app = new Vue({
      el: '#app',
      data:{
        adminEmail:'',
        adminTel:'',
        uid:'',
        userInfo:{},//用户信息
        cartCount:0,//购物车数量
        wishCount:0,//心愿单数量///
        types:[],//类别信息
        cids:'',//购物车id
        carts:[],
        countmoneys:0,//总计
        num:0,//商品数量
        aid:0,//地址id
        did:'',//优惠券id
        oid:0,//订单id
        option:'',
        addr:{
                aname:'',
                atel:'',
                prov:'',
                city:'',
                area:'',
                address:''
            },
        addrs:[],
        dismoney:0,//优惠金额
        flag:false
      },
      methods:{
        locationaddr(obj){
          this.aid = obj.aid;
          
        },
        default_addr(obj){
          localStorage.setItem("default_addr",obj.aid);
          this.aid = localStorage.getItem("default_addr");
          
        },
        findAdminInfo(){//查询管理员信息
            axios.get("../userController/findAdminInfo").then(resp=>{
              localStorage.setItem("adminEmail",resp.data.email);
              localStorage.setItem("adminTel",resp.data.tel);
              this.adminEmail = resp.data.email;
              this.adminTel = resp.data.tel;
              
            });
          },
          findUserInfo(){//查询用户信息
            let uid = localStorage.getItem("uid");
              if(uid == null || uid == ""){
                alert("请先登录");
                  location.href="login.html";
					        return;
                
				    }else{
              this.uid = localStorage.getItem("uid");
            }
            axios.get("../userController/findUserInfo").then(resp=>{
                if(resp.data == -1){
                  alert("请先登录");
                  location.href = "login.html";
                  return;
                }else{
                  this.userInfo = resp.data;
                  console.log(resp.data);
                }
              });  
          },
          findTypes(){
            axios.get("../typeController/findTypes").then(resp=>{
              this.types = resp.data;
            });
          },
          getCartCount(){//得到购物车数量
            if(this.userInfo == null){
              return;
            }
            let count = localStorage.getItem("cartCount");
            if(count == null || count == ""){
              axios.get("../carInfoController/getCartCount",{
                params:{
                  uid:this.uid
                }
                }).then(resp=>{
                this.cartCount = resp.data;
                console.log(this.cartCount);
                //存值
                localStorage.setItem("cartCount",this.cartCount);
              });
            }else{
              this.cartCount = count;
            }		
			    },
          getWishCount(){//得到心愿单数量
            if(this.userInfo == null){
              return;
            }
            let count = localStorage.getItem("wishCount");
            if(count == null || count == ""){
              axios.get("../wishController/getWishCount",{
                params:{
                  uid:this.uid
                }
                }).then(resp=>{
                this.wishCount = resp.data;
                //存值
                localStorage.setItem("wishCount",this.wishCount);
              });
            }else{
              this.wishCount = count;
            }		
			    },
          findByCids(){
            axios.get("../carInfoController/findByCids",{
                params:{
                    cids:this.cids
                }
            }).then(resp=>{
                console.log(resp.data);
                this.carts = resp.data;
                //
                 // 使用 parseFloat 来确保是数值类型  
                this.num = this.nums;
            });
          },
          waitPay() {
            if(this.dismoney == 0){
              this.countmoneys = (parseFloat(this.totalPrice) + 10);
            }else{
              this.countmoneys = ((parseFloat(this.totalPrice) + 10)*this.dismoney).toFixed(2);
            }
            console.log("折扣"+this.dismoney); 
            console.log("总金钱"+ this.countmoneys);
              if (!this.carts || this.carts.length === 0) {  
                return;  
              }
              if((localStorage.getItem("default_addr") == null || localStorage.getItem("default_addr") == '')&&this.aid == 0){
                alert("未选择地址");
                return;
              }
              console.log("现在的地址"+this.aid); 
              axios.get("../orderController/waitPay", {  
                params: {  
                  uid: this.uid,  
                  cids: this.cids,  
                  countmoneys: this.countmoneys,  
                  num: this.num,  
                  aid: this.aid,  
                  did: this.did  
                }  
              }).then(resp => {  
                if (resp.data === -1) {  
                  console.log("未付款订单插入失败");
                  return;  
                } else if (resp.data === -2) {  
                  console.log("最大oid查找失败");
                  return;  
                } else if (resp.data === -3) {  
                  console.log("订单详情数据插入失败");
                  return;  
                } else {  
                  this.oid = resp.data;  
                  this.payOrder(); // 调用支付方法  
                }  
              }).catch(error => {  
                console.error("waitPay 请求失败", error);  
              });  
            },  
              
            payOrder() { // 将 pay 方法的部分逻辑分离出来
              if (!this.oid) {  
                console.log("oid 未被赋值，无法进行支付");  
                return;  
              }  
              axios.post("../orderController/pay", qs.stringify({
                countmoneys: this.countmoneys,  
                out_trade_no: this.oid 
              })).then(resp => {  
                console.log(resp);  
                document.write(resp.data); // 示例：使用  alert 弹出响应数据
                this.deleteCartP();
                
              }).catch(error => {  
                console.error("支付请求失败", error);  
              });  
            },
            deleteCartP(){
              axios.post("../carInfoController/deleteCartP",qs.stringify({
                uid: this.uid,  
                cids: this.cids 
              })).then(resp => {
                localStorage.setItem("cartCount",'');
                this.getCartCount();
              });
            },
            // updatebalance(){
            //   axios.post("../orderController/updatebalance",qs.stringify({
            //     oid:this.oid,
            //     uid:this.uid,
            //     countmoneys:this.countmoneys
            //   })).then(resp=>{
            //   });
            // },
            pay() {
               
              if (this.carts.length === 0) {
                alert("1");  
                return;  
              }  
              if(this.option == 'option3'){
                this.waitPay();
              }else{
                alert("请选择支付方式");
              }
               // 只需调用 waitPay，它会在适当时机调用 payOrder  
            },
            getaddrs(){
              if(this.userInfo == null){
                return;
              }
                axios.get("../addrController/getaddrs",{
                  params:{
                    uid:this.uid
                  }
                }).then(resp=>{
                  console.log(resp.data);
                  this.addrs = resp.data;
                });
            },
            addAddr(){
                if(this.addr.aname == "" || this.addr.atel == "" || this.addr.area == "" || this.addr.address == ""){
                    alert("请填写完整信息");
                    return;
                }
                axios.post("../addrController/addAddr",qs.stringify({
                    uid:this.uid,
                    aname:this.addr.aname,
                    atel:this.addr.atel,
                    prov:this.addr.prov,
                    city:this.addr.city,
                    area:this.addr.area,
                    address:this.addr.address
                })).then(resp=>{
                    if(resp.data > 0){
                        this.getaddrs();
                        $("#addr_div").css("display", "none");
                    }else{
                        alert("添加失败");
                    }
                });

            },
            getDiscount(){
              if(this.did == ''){
                return;
              }else{
                axios.get("../discountcardController/getDiscount",{
                  params:{
                    did:this.did
                  }
                }).then(resp=>{
                  this.dismoney = Number(resp.data.discount);
                });
              } 
            }
      },
      computed:{
            totalPrice(){
                if (!this.carts || this.carts.length === 0) return 0.00;
                let temp = 0;
                this.carts.forEach(item=>{                    
                    temp += item.outprice * item.cartnum;                   
                });
                return temp.toFixed(2);
                
            },
            nums(){
                if (!this.carts || this.carts.length === 0) return 0;
                let temp = 0;
                this.carts.forEach(item=>{
                    temp += parseInt(item.cartnum);
                });
                return temp;
                
            }
      },
      created(){
        let ids = location.search.replace("?","");
        if (ids.endsWith("-1")) {  
          this.did = '';  
        }else{
          this.did = ids.substring(ids.length-1);
        }
        let Cid = ids.split(",").slice(0,-1);
        this.cids = Cid.join(",");
        console.log(this.did);
        console.log(ids.length);
        this.getDiscount();
        this.findAdminInfo();
        this.findUserInfo();
        this.findTypes();
        this.getCartCount();
        this.getWishCount();
        this.findByCids();
        this.getaddrs();
        
      }
    });
  </script>
  <script type="text/javascript">

    function showAddrDiv() {
      $("#addr_div").css("display", "block");
    }
    
    function hiddenDiv() {
      $("#addr_div").css("display", "none");
    }
    </script>
 </body>
</html>